/*
    Diários-EDU v0.1
    File : all.css
    Created on : 06/02/2014, 11:26:40
    Last update: 17/04/2014, 21:03:48
    Author     : bruce albuquerque
*/

*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
input{outline: none;}
input[type='radio'], input[type='checkbox']  {
    box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
    -webkit-appearance: none;
    border: 1px solid #a0a0a0;
    height: 1.5em;
    width: 1.5em;
    position: relative;
    top: .1em;
    display: inline-block;
    font-family: icomoon;
}
input[type='radio']:checked::before, input[type='checkbox']:checked::before  {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    content: "\e6fe";
    color: #069;
    display: inline-block;
    font-size: 1.3em;

    opacity: 1;
    position: absolute;
}
figure img{width:100%}
.clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix { display: block;}
ul{list-style: none;}
a{text-decoration: none; color: #333; }
a:hover{color: #069;}

/* Primefaces */

.ui-state-hover {
    box-shadow: none;
}
.ui-state-default{
    box-shadow: none;
    padding: 0;
}
.ui-button{
    box-shadow: none;
    padding: 0;
    line-height: 0;
    font-size: initial;

}
.ui-button-text-only .ui-button-text {
    padding: 0;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none;
    border: none;
    font-weight: normal;
    text-shadow: none;
}
.ui-corner-all {
    border-radius: 0;
}
.ui-commandlink{font-family:playregular !important; }

/*FIM PRIMEFACES*/

.success{background: #007232; color: #FFF; border-radius: 3px; font-family: playregular; padding: 7px;}
.success:hover{background: linear-gradient(to bottom, #3877B, #007232 130%);}

.cancel{border: none;background: #AA2F1F;color: #FFF; border-radius: 3px;  font-family: playregular; padding: 7px; margin: 0 3px;}
.cancel:hover{background: linear-gradient(to bottom, #AA2F1F, #902116 130%);}

.print .ui-button-text {padding: 0 !important;}
.print{border: none;background: #1E68BF;color: #FFF; border-radius: 3px;  padding: 9px 8px 12px 8px; line-height: 1;}
.print:hover{background: linear-gradient(to bottom, #069, #1E68BF 130%);}

.legend{font-size: .7em; margin: 3px 0 0 0;}

/* template */
.wrapper{ width: 100%; height: 100%;margin: 0 auto;}
.head{ background: #f5f5f5; font-family: playregular; box-shadow: 1px 1px 5px #444; border-bottom: solid 1px #333; }
.user{font-family: playregular; line-height: 2;width: 100%;font-size: 1em; color: #555; }
.user a{font-size: 1.2em;}
.head h1{font-size: 1.5em; line-height: 2;}
.content{  border: solid 1px #ccc; border-top: none; font-family: playregular; width: 100%; padding: .5em;}
.footer{font-family: playregular;}
.footer p{text-align: center;margin: 3px 0 0 0;}
.version{font-size: 0.6em; color: #F00;}

/* Login */
.login-edu h1{color: #444;text-align: center; padding: .5%;}
.login-edu h3{ text-align: center; padding: .5% 0;}
.form_login{width: 400px; margin: 0 auto; text-align: center; padding: 2% 0;}
.input-login{width: 100%;  padding: 1%; margin: 1px}
.input-login div{width: 40px; float: left; padding: 10px; font-size: 1.5em; position: absolute; color: #ccc;}
.input-login span{padding: 5px;}
.input-login input{width: 380px; float: left; padding: 20px 20px 20px 50px; border: solid 1px #ccc; outline: none; font-size: 1em; color: #444;}
.input-login input[type="text"]:focus, .input-login input[type="password"]:focus{outline:solid 1px #069; border: solid 1px #FFF; }
.input-login input[type="submit"]{color: #222; border-radius: 4px; padding: 20px; border: solid 2px #FFF; background: #1E68BF; color: #FFF; text-transform: capitalize;}
.input-login input[type="submit"]:hover{cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, from(#069), to(#1E68BF)) repeat-X; }
.box_error{margin: 10px auto; text-align: center; color: #F00; font-size: 1.2em}


/*home.html*/
.left-side{ padding: .3em; width: 30%; float: left;}
.right-side{padding: .3em;width: 70%; float: left;}
.left-side h3{color: #777;font-weight: normal;margin: 0 0 2px 0;}
.box-search{width: 100%;}
.search-field{ float: left;width: 80%; height: 40px;}
.search-field input{border: solid 1px #ccc; width: 100%; height: 100%; padding: 0 10px;}
.search-field input:focus{  border-color: #069;box-shadow: 0 1px 2px #f5f5f5, inset 3px 0px 0px #069;transition: box-shadow .3s ease-in-out;}
.submit{float: left; width: 20%;text-align: center; height: 40px; }
.submit span{color: #FFF;}
.submit button{ border: none; background: #069; color: #FFF; width: 100%; height: 100%;}
.submit button:focus{ outline: none;}
.submit button:hover{ background: linear-gradient(to bottom, #069, #091756 130%);cursor: pointer;}
.filters, .box-search, .school{ float: left; width: 100%; margin: 0 0 20px 0;}
.school select{padding: 10px; border: solid 1px #ccc; outline: none; background: #fff; width: 100%;}
.results{ width: 70%; background: #f5f5f5;float: left;padding: 1.5em 0 1em 1.5em;}
.result-box{ width: 45%; background: #fff; float: left;height: 100%; margin: .5em; padding: .5em; box-shadow: 0 1px 1px #999, inset 0 0px 3px #fff; background: #fcfcfc;}
.result-box:hover{ box-shadow: 0 1px 6px #999, inset 0 0px 3px #fff; background: #fcfcfc;}
.informacion{ font-size: .8em;text-align: center;}
.informacion ul li{ padding: .2em 0;}
.actions{ padding: .2em 0;text-align: center;}
.actions > a{ padding: 0 .2em;font-size: 1.7em;}
.actions span{font-size: 1.6em; color: #999; padding: 0.2em;} 

/* frequencia.html */
.attendance{}
.attendance .left-side{ text-transform: uppercase; font-size: 1em;}
.attendance h1{text-align: center; margin: 0;}
.attendance h2{font-weight: normal;}
.attendance ul{font-size:.8em;}
.attendance ul li > span{color: #777; margin: 0 5px 0 0;}
.attendance .search-box{margin: 15px 0; text-align: center;}
.attendance select{border: solid 1px #ccc; background: #FFF; padding: 7px; width: 40%;}
.attendance select:focus{outline: none;}
.attendance-list{border-collapse: collapse; text-align: center; width: 100%; margin: 10px 0;}
.attendance-list tr{border: solid 1px #ccc;}
.attendance-list tr:nth-child(2n+1){background: #f9f9f9;}
.attendance-list th{background: #f5f5f5; font-weight: normal; padding: 5px 0;}
.attendance-list td{padding: 3px 0;}
.attendance-list .name{text-align: left; text-transform: uppercase;}
.attendance .box-buttons{padding: 2px 0; width: 100%; text-align: right; }
.attendance .class-data{background: #222; padding: 2px;}
.left{text-align: left;}

/*conteudo*/
.classes .search-area{margin: 20px 0 0 0;}
.classes .box-search{width: 80%; margin: 10px 10% 0;}
.classes .search-field{ height: auto; width: 80%; float: left; height: 40px;}
.classes .search-field input{border: solid 1px #ccc; width: 50%; height: 100%; text-align: center;}
.classes .submit{float: left; width: 20%;}
.classes .submit > button{width: 100%;}
.classroom td{font-size: .8em;}
.classroom{margin: 3% 0 0 0;}
.classroom table{width: 100%; border-collapse: collapse; text-align: center;}
.classroom table th{background: #f5f5f5; padding: .5% 0; font-weight: normal;}
.classroom table th input{margin: 0 0 0 3%}
.classroom table tr{border: solid 1px #CCC;}
.classroom table td{padding: 1% 0;}
.classroom textarea{border: solid 1px #ccc; width: 90%; padding: 2%; resize: none; height: 60px;}
.classroom textarea:focus{box-shadow: 0 3px 5px #f5f5f5; outline: none; border: solid 1px #069;}
.classroom a{font-size: 1.5em;}
.classroom a:hover{color: #007232;}
.classroom .download-button{width: 100%;text-align: center;}
.classroom .download-button button{font-family: playregular; border: none;background: #1E68BF;color: #FFF; border-radius: 3px;  line-height: 2; font-size: 1em; padding: 2px; }
.classroom .download-button button:hover{background: linear-gradient(to bottom, #069, #1E68BF 130%); color: #FFF;}


/*Media queries*/
@media screen and (min-width: 1em) and (max-width: 29.9999em){
    /*login*/
    .form_login{width: 100%; margin: 10px auto 0; text-align: center; padding: 2%;}
    .input-login{width: 100%;  padding: 2% 1%; margin: 1px}
    .input-login div{float: left; padding: 10px; font-size: 1.5em; margin: 0 5px 0 0;  position: absolute; color: #ccc;}
    .input-login span{padding: 5px;}
    .input-login input{width: 100%; float: left; padding: 20px 20px 20px 50px; border: solid 1px #ccc; outline: none; font-size: 1em; color: #444;}
    /*template*/
    .head{text-align: center;}
    .user{ text-align: center;  }
    .user a{font-size: 1.2em; text-decoration: underline;}
    /*home*/
    .left-side{width: 100%;}
    .school select{width: 100%;}
    .box-search{display: block;width: 100%;}
    .results{width: 100%; padding: 0 2% 2%;}
    .result-box{float: left; width: 100%; margin: 2% auto 0;}
    /*frequencia*/
    .attendance .left-side{background: #f5f5f5; color: #222; border-radius: 2px;}
    .attendance h1{text-align: center; margin: 0 0 10px 0;}
    .attendance h2{text-align: center;}
    .attendance h3{font-size: 1em; font-weight: normal; margin: 0 0 5px 0;}
    .attendance ul{text-align: center; }
    .attendance ul li > span{color: #000;}
    .attendance li{margin: 3px 0;}
    .attendance .right-side{width: 100%; text-align: center; margin: 15px 0;}
    .attendance .right-side h2{font-size: 1.2em; font-weight: bolder; color: #FFF;}
    /*conteudo*/
    .classes .search-field input{font-size: .8em;}

}

@media screen and (min-width: 30em) and (max-width: 40.124em){
    /*template*/
    .head{text-align: center;}
    .user{ text-align: center;}
    .user a{font-size: 1.2em; text-decoration: underline;}
    /*home*/
    .left-side{width: 100%;}
    .filters{width: 40%; float: left;}
    .school{width: 60%; float:right;}
    .school select{width: 100%;}
    .box-search{display: block;width: 100%;}
    .results{background: #069; width: 100%; padding: 0 1% 2%;}
    .result-box{float: left; width: 48%; margin: 2% 1% 0;}
    .a:hover{color: #069;}
    /*frequencia*/
    .attendance .left-side{background: #f5f5f5; font-size: 1.1em; padding: 20px 0;}
    .attendance h1{text-align: center; margin: 0 0 10px 0;}
    .attendance h2{text-align: center;}
    .attendance h3{font-size: 1em; font-weight: normal; margin: 0 0 5px 0;}
    .attendance ul{text-align: center; }
    .attendance ul li > span{color: #222;}
    .attendance li{margin: 3px 0;}
    .attendance .right-side{width: 100%; text-align: center; margin: 15px 0;}
    .attendance .right-side h2{font-size: 1.2em; font-weight: bolder; color: #FFF;}
    /*conteúdo*/
    .classes .box-search{width: 60%; margin: 10px 20% 0;}
}

@media screen and (min-width: 40.125em) and (max-width: 51em){
    .form_login{margin: 70px auto;}
    /*template*/
    .head{position: fixed; top: 0; width: 100%; z-index: 3;}
    .user{position: fixed; top: 4px; text-align: right; right: 15px; width: 50%; background: #f5f5f5; z-index: 4;}
    .user a{font-size: 1.2em; text-decoration: underline; border-radius: 100%; }
    .head h1{margin: 0 0 0 20px;}

    /*home*/
    .left-side{width: 100%; margin: 45px 0 0 0;}
    .filters{width: 40%; float: left;}
    .school{width: 60%; float:right;}
    .school select{width: 100%;}
    .box-search{width: 100%; }
    .results{width: 100%; padding: 0 1% 2%; }
    .result-box{float: left; width: 48%; margin: 2% 1% 0;}

    /*frequencia*/
    .attendance .class-data{background: #FFF; margin: 45px 0 0 0;}
    .attendance .left-side{margin: 0; width: 50%; float: left; font-size: 1em;}
    .attendance h1{margin:0; text-align: right; width: 50%; float: right;}
    .attendance .right-side{width: 50%; float: left; text-align: right;}
    .attendance .search-box{text-align: right;}
    .attendance select{width: 25%;}


    /*conteudo*/
    .classes .search-area{text-align: right;}
    .classes .box-search{margin: 0 0 0 50%;  width: 50%;}
}

@media screen and (min-width: 51.02em) and (max-width: 120em){
    .form_login{margin: 70px auto;}
    /*template*/
    .head{position: fixed; top: 0; width: 100%; z-index: 3;}
    .user{position: fixed; top: 4px; text-align: right; right: 15px; width: 50%; background: #f5f5f5; z-index: 4;}
    .user a{font-size: 1.2em; text-decoration: underline; border-radius: 100%; }
    .head h1{margin: 0 0 0 20px;}

    /*home*/
    .left-side{width: 40%; margin: 45px 0 0 0;}
    .results{width: 60%; padding: 0 1% 2%; float: left; margin: 50px 0 0 0;}
    .result-box{float: left; width: 48%; margin: 2% 1% 0; font-size: 1.2em; }

    /*frequencia*/
    .attendance .class-data{background: #FFF; margin: 45px 0 0 0;}
    .attendance .left-side{margin: 0; width: 50%; float: left; font-size: 1.2em;}
    .attendance h1{margin: 0; text-align: right; width: 50%; float: right;}
    .attendance ul{font-size:.9em;}
    .attendance .right-side{width: 50%; float: left; text-align: right;}

    .attendance .search-box{text-align: right;}
    .attendance select{width: 180px;}

    /*conteúdo*/
    .classes .search-area{text-align: right;}
    .classes .search-field input{width: 130px;}
    .classes .submit{width: 20%;}
    .classes .box-search{margin: 0 0 0 50%;  width: 50%;}
}
@media screen and (min-width: 121em){
    /*template*/
    .user{font-size: 1.5em;  position: fixed; top: 15px; text-align: right; right: 20px; width: 58%; background: #f5f5f5;}
    .user a{text-decoration: underline;}
    .head{padding: 10px 0;}
    .head h1{font-size: 2.5em; margin: 0 0 0 20px; }

    /*home*/
    .left-side{width: 40%;}
    .results{width: 60%; padding: 0 1% 2%; float: left; }
    .result-box{float: left; width: 48%; margin: 2% 1% 0; font-size: 2em;}

    /*frequencia*/
    .attendance .class-data{background: #FFF; margin: 45px 0 0 0;}
    .attendance .left-side{margin: 45px 0 0 0; width: 50%; float: left; font-size: 1.2em;}
    .attendance h1{margin: 0; text-align: right; width: 50%; float: right;}
    .attendance ul{font-size:.9em;}
    .attendance .right-side{width: 50%; float: left; text-align: right;}
    .attendance .search-area{width: 100%; }
    .attendance .search-box{width: 20%; padding: 3px; float: right;}
    .attendance .search-box h3{font-size: 1em;}
    .attendance .search-field{}
    .attendance .search-field select{width: 100%;}

    /*conteúdo*/
    .classes .search-area{text-align: right;}
    .classes .search-field input{width: 130px;}
    .classes .submit{width: 20%;}
    .classes .box-search{margin: 0 0 0 50%;  width: 50%;}
}
